@namespace MatBlazor
@using Microsoft.AspNetCore.Components
@inherits BaseMatDomComponent

<div class="@ClassMapper.AsString()" @ref="Ref"  style="@StyleMapper.AsString()" @onclick="OnClickHandler" @attributes="Attributes" Id="@Id" title="@Title">
    @ChildContent
    <span class="after material-icon mdc-sub-menu-icon"
          style="@ToggleIconStyle">&#58131;</span>
</div>

@code
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [CascadingParameter]
    public BaseMatNavSubMenu NavSubMenu { get; set; }

    /// <summary>
    /// The title shown.
    /// </summary>
    [Parameter]
    public string Title { get; set; } = null;

    // Forces the toggle icon to collapsed state even when parent is expanded
    protected string ToggleIconStyle => NavSubMenu.Expanded ? "" : "transform: none !important";

    protected override void OnInitialized()
    {
        base.OnInitialized();
        ClassMapper.Add("mat-expansion-panel__summary")
                   .Add("mdc-ripple-surface")
                   .Add("mdc-nav-sub-menu-header")
                   .Add("mdc-list--non-interactive");
        CallAfterRender(async () => { await JsInvokeAsync<object>("matBlazor.matAccordion.initSummary", Ref); });
    }

    protected void OnClickHandler(MouseEventArgs e)
    {
        this.NavSubMenu.ToggleAsync();
    }
}